<template>


    <!--===START表单信息START===-->
    <div style="width: 100%; margin-top:40px">

        <!--===START功能区域START===-->
        <div style="display:flex; padding: 0 20px 6px; justify-content: space-between;">
            <span>
                <el-button type="success" style="height: 40px; width: 160px;" @click="add">添加</el-button>
            </span>
            <span style="display: flex">
                <el-input
                        v-model="search"
                        class="w-50 m-2"
                        size="large"
                        placeholder="请输入搜索内容"
                />
                <el-button type="primary" style="height: 40px; width: 120px;margin-left: 6px">搜索</el-button>
            </span>
        </div>
        <!--===END功能区域END===-->

        <!--===START表单区START===-->
        <div style="width: 100%; padding: 10px">
            <el-table :data="tableData" border>
                <el-table-column prop="id" label="id"/>
                <el-table-column prop="productNum" label="产品编号"/>
                <el-table-column prop="productName" label="产品名称"/>
                <el-table-column prop="cityName" label="城市名称"/>
                <el-table-column prop="departureTime" label="出发时间"/>
                <el-table-column prop="productPrice" label="产品价格"/>
                <el-table-column prop="productDesc" label="产品描述"/>
                <el-table-column prop="productStatusStr" label="产品状态"/>

                <el-table-column fixed="right" label="操作" width="120">
                    <template #default>
                        <div style="display: flex;">
                                <span style="margin-right: 5px">
                                      <el-button type="info" @click="handleClick" style="width: 40px">查看</el-button>
                                </span>
                            <span>
                                     <el-popconfirm
                                             confirm-button-text="是"
                                             cancel-button-text="不"
                                             :icon="InfoFilled"
                                             icon-color="red"
                                             title="确认要删除吗?"
                                             @confirm="confirmEvent"
                                             @cancel="cancelEvent">
                                <template #reference>
                                    <el-button type="danger" style="width: 40px">删除</el-button>
                                </template>
                            </el-popconfirm>
                                </span>
                        </div>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--===END表单区END===-->
        <!--===END表单信息END===-->

        <!--===START分页系统START===-->
        <div style="margin:20px 10px">
            <el-pagination
                    v-model:currentPage="currentPage"
                    v-model:pageSize="pageSize"
                    :page-sizes="[5, 10, 15]"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total='total'
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
        <!--END分页系统END-->

    </div>
</template>

<script>
    import http from "../api/base"

    export default {
    name:'product',
        components: {},
        data() {
            return {
                //此数组对象 在findAll查询所有User数据后 存储:
                productList: [],
                search: '',
                total: 10,
                pageSize: 10,
                currentPage: '',
                tableData: [
                    {
                        id: '2016-05-03',
                        productNum: 'Tom',
                        productName: '试试水',
                        cityName: '合肥',
                        departureTime: 'No. 189, Grove St, Los Angeles',
                        productPrice: 4000,
                        productDesc: '非常好',
                        productStatusStr: '开启'
                    },
                    {
                        id: '2016-05-03',
                        productNum: 'Tom',
                        productName: '试试水',
                        cityName: '合肥',
                        departureTime: 'No. 189, Grove St, Los Angeles',
                        productPrice: 4000,
                        productDesc: '非常好',
                        productStatusStr: '开启'
                    },
                    {
                        id: '2016-05-03',
                        productNum: 'Tom',
                        productName: '试试水',
                        cityName: '合肥',
                        departureTime: 'No. 189, Grove St, Los Angeles',
                        productPrice: 4000,
                        productDesc: '非常好',
                        productStatusStr: '开启'
                    },
                    {
                        id: '2016-05-03',
                        productNum: 'Tom',
                        productName: '试试水',
                        cityName: '合肥',
                        departureTime: 'No. 189, Grove St, Los Angeles',
                        productPrice: 4000,
                        productDesc: '非常好',
                        productStatusStr: '开启'
                    },
                    {
                        id: '2016-05-03',
                        productNum: 'Tom',
                        productName: '试试水',
                        cityName: '合肥',
                        departureTime: 'No. 189, Grove St, Los Angeles',
                        productPrice: 4000,
                        productDesc: '非常好',
                        productStatusStr: '开启'
                    },
                    {
                        id: '2016-05-03',
                        productNum: 'Tom',
                        productName: '试试水',
                        cityName: '合肥',
                        departureTime: 'No. 189, Grove St, Los Angeles',
                        productPrice: 4000,
                        productDesc: '非常好',
                        productStatusStr: '开启'
                    },
                    {
                        id: '2016-05-03',
                        productNum: 'Tom',
                        productName: '试试水',
                        cityName: '合肥',
                        departureTime: 'No. 189, Grove St, Los Angeles',
                        productPrice: 4000,
                        productDesc: '非常好',
                        productStatusStr: '开启'
                    }
                ]
            }
        },
        methods: {
            //分页系统：
            handleSizeChange() {

            },
            handleCurrentChange() {

            },
            // 每条数据的操作栏：
            handleClick() {

            },
            confirmEvent() {

            },
            cancelEvent() {

            },
            //增加数据:
            add() {

            }
        },
        created: function () {
            http.get("/product", {
                headers: {'satoken': 'dac4ce70-4df3-4b75-84dd-5cabdd524197'}
            })
                .then((response) => {
                    this.productList = response.data;
                    console.log(response.data);
                })
        }
    }
</script>


// //但是为了方便全局统一调用封装的axios，我一般采用（推荐）
// axios.get('/user', {  //params参数必写 , 如果没有参数传{}也可以
//     params: {
//        id: 12345，
//        name: user
//     }
// })
